<!--
 * @Descripttion: 设备-关联表格
 * @LastEditors: xzh
 * @LastEditTime: 2023-09-07 11:42:24
-->
<template>
  <DileTable class="relEquip-table" ref="dileTableRef">
    <template #preColumn>
      <vxe-column
        field="code"
        :title="$t('page.equipManageArr.equipArchivesArr.code')"
      />
      <vxe-column
        field="name"
        :title="$t('page.equipManageArr.equipArchivesArr.name')"
      />
      <vxe-column
        field="specification"
        :title="$t('page.equipManageArr.equipArchivesArr.specification')"
      />
      <vxe-column
        field="equipType"
        :title="$t('page.equipManageArr.equipType')"
      >
        <template #default="{ row }">
          <span>{{ row.extJson.typeName }}</span>
        </template>
      </vxe-column>
      <vxe-column field="position" :title="$t('page.systemManageArr.position')">
        <template #default="{ row }">
          <span>{{ row.extJson.positionName }}</span>
        </template>
      </vxe-column>
      <vxe-column
        field="position"
        :title="$t('page.equipManageArr.equipState')"
      >
        <template #default="{ row }">
          <span>{{ row.extJson.statusName }}</span>
        </template>
      </vxe-column>
      <!-- 额外列 -->
      <slot name="extClounm"></slot>
    </template>
  </DileTable>
  <!-- 选择对象列表 -->
  <DileSelectItemTable
    ref="dileSelectItemTableRef"
    :selectTableType="selectTableTypeEnum.equip"
    @sure="handleAddRelEquip"
  />
</template>

<script setup lang="ts">
import { ref, reactive, provide, toRefs, readonly } from "vue";
import {
  btnTypeEnum,
  propsParam_Inf,
} from "@/components/dile-table/index.type";
import type { object_Inf } from "@/utils/typings/index.type";
import { selectTableTypeEnum } from "@/components/dile-selectItem/index.type";
import DileTable from "@/components/dile-table/index.vue";
import DileSelectItemTable from "@/components/dile-selectItem/selectItem-table/index.vue";
import Dile_Methods from "@/utils/methods";
/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 选择对象列表实例
 * @Param:
 */
let dileSelectItemTableRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion: 初始表格对象
 * @Param:
 */
let sourceTableData = readonly<Array<object_Inf>>([]);

/**
 * @Author: xzh
 * @Descripttion:表格加载事件
 * @Param:
 */
let initTableData = (tableData: Array<object_Inf>) => {
  //设置表格数据源
  propsParam.tableData = tableData;
  //记录原始数据源
  sourceTableData = Object.freeze(tableData);
};
/**
 * @Author: xzh
 * @Descripttion:工具栏按钮点击事件
 * @Param:
 * @param {*} event
 */
let handleToolBtnClick = (event: object_Inf) => {
  let { code } = event,
    { rowChecked } = dileTableRef.value;
  //![新增]->行勾选判断
  if (!["add"].includes(code) && !rowChecked()) {
    return false;
  }
  switch (code) {
    case "add":
      //加载选择对象列表
      dileSelectItemTableRef.value.init();
      break;
    case "delete":
      //删除
      handleDelete();
      break;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 添加关联设备
 * @Param:
 */
let handleAddRelEquip = (dataArr: Array<object_Inf>) => {
  let { tableData }: object_Inf = toRefs(propsParam);
  //获取不重复的数据
  let addArr = dataArr.filter(
    (x: object_Inf) =>
      !(tableData?.value || []).map((y: object_Inf) => y.id).includes(x.id)
  );
  tableData.value = tableData.value?.concat(addArr);
};

/**
 * @Author: xzh
 * @Descripttion: 删除事件
 * @Param:
 */
let handleDelete = () => {
  //获取表格选择项
  let { selectObjArr } = dileTableRef.value.getTableParam(),
    { tableData }: object_Inf = toRefs(propsParam);
  //移除选中行
  tableData.value = tableData.value.filter(
    (x: object_Inf) => !selectObjArr.map((y: object_Inf) => y.id).includes(x.id)
  );
};

/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  checkbox: true,
  tableData: [],
  isPagination: false,
  tableToolArr: [
    {
      // t("table.btnArr.add"),
      label: "table.btnArr.add",
      code: "add",
      btnType: btnTypeEnum.button,
      plain: false,
      customBehavior: true,
    },
    {
      // t("table.btnArr.delete"),
      label: "table.btnArr.delete",
      code: "delete",
      btnType: btnTypeEnum.button,
      customBehavior: true,
    },
  ],
  emitEvents: {
    toolBtnClick: handleToolBtnClick,
  },
});
provide("propsParam", propsParam);

defineExpose({
  //获取关联数据
  getRelData: () =>
    Dile_Methods.dataArrDiffFormat(
      sourceTableData as Array<object_Inf>,
      propsParam.tableData || []
    ),
  initTableData,
});
</script>
<style lang="scss" scoped>
.relEquip-table {
  width: 100%;
  height: 20rem;
}
</style>
